<!doctype html>
<html lang="zh">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- vue 用户界面 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- axios 网络通信 ajax -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

    <!-- 巨幕 -->
    <div class="jumbotron jumbotron-fluid pb-1 pt-5 mb-0">
        <div class="container">
            <h1 class="display-3">医生信息管理</h1>
            <p class="lead">科大协和医院</p>
        </div>
    </div>
    <!-- 页面导航 -->
    <nav class="breadcrumb">
        <a class="breadcrumb-item" href="index.html">首页</a>
        <a class="breadcrumb-item" href="fdpmt.html">一级科室管理</a>
        <span class="breadcrumb-item active">医生信息管理</span>
        <a class="breadcrumb-item" href="patient.html">就诊人管理</a>
        <a class="breadcrumb-item" href="register.html">预约挂号表管理</a>
    </nav>

    <div id="doctorapp" class="container">
        <table class="table table-striped table-hover">
            <thead class="text-center">
                <tr>
                    <th width="64px">医生姓名</th>
                    <th width="64px">所属子科室id</th>
                    <th width="64px">医生电话</th>
                    <th width="64px">简短介绍</th>
                    <th width="64px">详细介绍</th>
                    <th width="128px">操作</th>
                </tr>
            </thead>
            <tbody class="text-center">
                <tr v-for="(p,index) in doctorList" :key="index">
                    <td>{{p.dname}}</td>
                    <td>{{p.dpmtid}}</td>
                    <td>{{p.dphone}}</td>
                    <td>{{p.sdescription}}</td>
                    <td>{{p.bdescription}}</td>
                    <td>
                        <div class="row">
                            <div class="col-lg-6 col-sm-12">
                                <!-- Button trigger modal -->
                                <button type="button" @click="save(p)" class="btn btn-outline-warning btn-sm btn-block"
                                    data-toggle="modal" data-target="#modelIdbj">编辑</button>

                            </div>
                            <div class="col-lg-6 col-sm-12">
                                <button type="button" @click=""
                                    class="btn btn-outline-danger btn-sm btn-block mt-lg-0 mt-sm-3">删除</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: '#doctorapp',
            data: {
                did: '',
                dname: '',
                dpmtid: '',
                dphone: '',
                sdescription: '',
                bdescription: '',
                doctorList: [],
            },
            methods: {
                //查询
                search: function () {
                    let url = '/api/Doctor'
                    axios.get(url)
                        .then(res => {
                            this.doctorList = res.data;
                        })
                        .catch(err => {
                            //出错了
                            console.error(err);
                        })
                },
            },
            //挂载，第一次进入时调用
            mounted() {
                //请求服务器获得数据
                //HTTP：GET,POST,PUT,DELETE
                this.search();
            },
        })
    </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>